<!--
 * @Author: your name
 * @Date: 2020-04-15 23:08:27
 * @LastEditTime: 2020-11-16 22:06:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \cloudEdu\src\views\entranceExam\index.vue
 -->
<template>
  <div class="entranceExam page-exp">
    <pageHeader></pageHeader>
    <div class="content">
      <img :src="bannerImg" class="banner" alt />
      <div class="examStatus">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="已发起的考试" name="first">
            <select-exam ref="selectExamRef" @changeTypeList="changeTypeList" @changeWorkList="changeWorkList"></select-exam>
            <div class="examList" v-loading="launchLoading">
              <template v-if="launchedExamLists.length > 0">
                <div class="list flex-r" v-for="item in launchedExamLists" :key="item.id">
                  <div class="txt">
                    <p>{{ item.examTitle }}</p>
                    <p class="time">考试时间：{{ (item.startTime || "").split("T")[0] }}~{{ (item.endTime || "").split("T")[0] }}</p>
                  </div>
                  <div class="entranceBtn" @click="enterExam(item)">进入考试</div>
                </div>
              </template>
              <div v-if="!launchLoading && launchedExamLists.length == 0" class="noData">暂无考试</div>
              <el-pagination
                v-if="launchedExamLists.length > 0"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="pagination.page"
                :page-size="pagination.limit"
                layout="total, prev, pager, next"
                :total="pagination.total"
              ></el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="已结束的考试" name="second">
            <select-exam ref="selectExamRef" @changeTypeList="changeTypeList" @changeWorkList="changeWorkList"></select-exam>
            <div class="examList" v-loading="finishLoading">
              <template v-if="finishedExamLists.length > 0">
                <div class="list flex-r" v-for="item in finishedExamLists" :key="item.id">
                  <div class="txt">
                    <p>{{ item.examTitle }}</p>
                    <p class="time">考试时间：{{ (item.startTime || "").split("T")[0] }}~{{ (item.endTime || "").split("T")[0] }}</p>
                  </div>
                  <div class="entranceBtn" @click="enterExam(item)">查看结果</div>
                </div>
              </template>
              <div v-if="!finishLoading && finishedExamLists.length == 0" class="noData">暂无考试</div>
              <el-pagination
                v-if="finishedExamLists.length > 0"
                background
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                :current-page.sync="pagination.page2"
                :page-size="pagination.limit2"
                layout="total, prev, pager, next"
                :total="pagination.total2"
              ></el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <PageFooter></PageFooter>
  </div>
</template>
<script>
import pageHeader from "@/components/PageHeader.vue";
import PageFooter from "@/components/PageFooter.vue";
import selectExam from "@/components/selectExam.vue";
export default {
  name: "entranceExam-index",
  components: {
    pageHeader,
    PageFooter,
    selectExam
  },
  data() {
    return {
      level: "",
      workTypeId: "",
      bannerImg: require("@/assets/img/entranceExam/banner.png"),
      activeName: "first",
      launchedExamLists: [],
      finishedExamLists: [],
      launchLoading: true,
      finishLoading: true,
      pagination: {
        page: 1,
        limit: 5,
        total: 0,
        page2: 1,
        limit2: 5,
        total2: 0
      }
    };
  },
  mounted() {
    this.hasLaunchedExamLists();
  },
  methods: {
    hasLaunchedExamLists() {
      let that = this;
      that.launchLoading = true;
      that
        .$http({
          url: "/wisdomlearn/exam/v1/getFutureExamList",
          method: "post",
          data: {
            examType: 1,
            index: that.pagination.page,
            count: that.pagination.limit,
            level: that.level,
            workTypeId: that.workTypeId
          }
        })
        .then(res => {
          if (res && res.retCode == "00000") {
            that.launchedExamLists = res.data.exanLIstBeans;
            that.pagination.total = res.data.total;
            that.launchLoading = false;
          }
        })
        .catch(err => {
          that.launchLoading = false;
        });
    },
    hasFinishedExamLists() {
      let that = this;
      that.finishLoading = true;
      that
        .$http({
          url: "/wisdomlearn/exam/v1/getEndExamList",
          method: "post",
          headers: {
            accessToken: "",
            clientId: ""
          },
          data: {
            examType: 1,
            index: that.pagination.page2,
            count: that.pagination.limit2,
            level: that.level,
            workTypeId: that.workTypeId
          }
        })
        .then(res => {
          if (res && res.retCode == "00000") {
            that.finishedExamLists = res.data.exanLIstBeans;
            that.pagination.total2 = res.data.total;
            that.finishLoading = false;
          }
        })
        .catch(() => {
          that.finishLoading = false;
        });
    },
    enterExam(item) {
      let examInfo = JSON.stringify({
        score: item.score,
        provide: item.examProvide,
        deptName: item.deptName,
        time: item.examTime
      });
      this.$router.push({
        path: "/entranceExam/detail",
        query: {
          id: item.examId,
          name: item.examTitle,
          examInfo,
          type: "examDetail"
        }
      });
    },
    handleClick() {
      this.level = "";
      this.workTypeId = "";
      if (this.activeName == "first") {
        this.pagination.page = 1;
        this.hasLaunchedExamLists();
      } else {
        this.pagination.page2 = 1;
        this.hasFinishedExamLists();
      }
    },
    handleSizeChange(val) {
      this.pagination.limit = val;
    },
    handleCurrentChange(val) {
      this.pagination.page = val;
      this.hasLaunchedExamLists();
    },
    handleSizeChange2(val) {
      this.pagination.limit2 = val;
    },
    handleCurrentChange2(val) {
      this.pagination.page2 = val;
      this.hasFinishedExamLists();
    },
    changeTypeList(value) {
      this.level = value;
      switch (this.activeName) {
        case "first":
          this.hasLaunchedExamLists();
          break;
        case "second":
          this.hasFinishedExamLists();
          break;
        default:
          this.hasLaunchedExamLists();
      }
    },
    changeWorkList(value) {
      this.workTypeId = value;
      switch (this.activeName) {
        case "first":
          this.hasLaunchedExamLists();
          break;
        case "second":
          this.hasFinishedExamLists();
          break;
        default:
          this.hasLaunchedExamLists();
      }
    }
  }
};
</script>
<style scoped>
.content {
  min-width: 1200px;
  flex: 1;
  background: #f2f2f2;
}
.banner {
  width: 100%;
  height: 150px;
}
.content .examStatus {
  width: 1200px;
  margin: 0 auto;
}
.examStatus .examList .list {
  width: 100%;
  height: 100px;
  margin: 10px 0;
  border: 1px solid #ccc;
  background: #fff;
  padding: 28px 87px;
  box-sizing: border-box;
  justify-content: space-between;
}
.list .txt p {
  font-size: 16px;
  color: #1e1e1e;
  letter-spacing: 0.08px;
  line-height: 39px;
}
.list .txt .time {
  font-size: 14px;
  color: #9c9b9b;
  letter-spacing: 0.07px;
}
.list .entranceBtn {
  width: 176px;
  height: 46px;
  text-align: center;
  line-height: 46px;
  border-radius: 23px;
  border-radius: 23px;
  font-size: 18px;
  color: #fafbfc;
  letter-spacing: 0.07px;
  background-image: linear-gradient(-51deg, #0bb5fe 0%, #086afc 100%);
  cursor: pointer;
}
/* .list .entranceBtn.finish {
  background: #acabab;
  cursor: not-allowed;
} */
</style>
<style>
.entranceExam .examStatus .el-tabs__nav-scroll {
  background: #fff;
}
.entranceExam .examStatus .el-tabs__nav {
  margin-left: 90px;
}
.entranceExam .examStatus .el-tabs__item {
  height: 80px;
  line-height: 80px;
  font-size: 20px;
  font-weight: bold;
}
</style>
